<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>标签栏切换效果</title>
    <style>
      body,ul{margin:0;padding:0;}
      ul{list-style:none;}
      .tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F96;}
      .tab-head{height:31px;}
      .tab-head-div{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;background:#206F96;line-height:30px;text-align:center;cursor:pointer;color:#fff;}
      .tab-head .current{background:#fff;border-bottom:1px solid #fff;color:#000;}
      .tab-head-r{border-right:0;}
      .tab-body-div{display:none;margin:20px 10px;}
      .tab-body .current{display:block;}
    </style>
  </head>
  <body>
    <div class="tab-box">
      <div class="tab-head">
        <div class="tab-head-div current">标签一</div>
        <div class="tab-head-div">标签二</div>
        <div class="tab-head-div">标签三</div>
        <div class="tab-head-div tab-head-r">标签四</div>
      </div>
      <!--jkdjfk?-->
      <div class="tab-body">
        <div class="tab-body-div current"> 1 </div>
        <div class="tab-body-div"> 2 </div>
        <div class="tab-body-div"> 3 </div>
        <div class="tab-body-div"> 4 </div>
      </div>
    </div>
    <script>
      // 获取标签栏的所有标签元素对象
      var tabs = document.getElementsByClassName('tab-head-div');
      // 获取标签栏的所有内容对象
      var divs = document.getElementsByClassName('tab-body-div');
      for (var i = 0; i < tabs.length; ++i) {        // 遍历标签部分的元素对象
        tabs[i].onmouseover = function() {           // 为标签元素对象添加鼠标滑过事件
          for (var i = 0; i < divs.length; ++i) {    // 遍历标签栏的内容元素对象
            if (tabs[i] == this) {    // 显示当前鼠标滑过的li元素
              divs[i].classList.add('current');
              tabs[i].classList.add('current');
            } else {                  // 隐藏其他li元素
              divs[i].classList.remove('current');
              tabs[i].classList.remove('current');
            }
          }
        };
      }
    </script>
  </body>
</html>